<template>
	<view class="page">
		<view class="publish-demand-wrapper">
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/user-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 30upx;margin-left: 18upx;font-weight: bold;">支付宝姓名</span>
				</view>
				<input  type="text" style="text-align: right;width: 60%;color: #191919;"  v-model="realName" placeholder="请如实填写便于结算" />
			</view>
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/alipay-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 30upx;margin-left: 18upx;font-weight: bold;">支付宝账号</span>
				</view>
				<input  type="text" style="text-align: right;width: 60%;color: #191919;"  v-model="alipayAccount" placeholder="请填写支付宝账号" />
			</view>
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/wechat-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 30upx;margin-left: 18upx;font-weight: bold;">微信</span>
				</view>
				<input  type="text" style="text-align: right;width: 70%;color: #191919;"  v-model="wechatAccount" placeholder="请填写微信号码(必填)" />
			</view>
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/email-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 30upx;margin-left: 18upx;font-weight: bold;">邮箱</span>
				</view>
				<input  type="text" style="text-align: right;width: 70%;color: #191919;" v-model="email"  placeholder="请填写邮箱地址(必填)" />
			</view>
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/qq-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 30upx;margin-left: 18upx;font-weight: bold;">QQ</span>
				</view>
				<input  type="text" style="text-align: right;width: 70%;color: #191919;" v-model="qqAccount" placeholder="请填写QQ号码" />
			</view>
		
			
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 30upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/tech-lang-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 28upx;margin-left: 18upx;font-weight: bold;">擅长语言</span>
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;">
			
					<picker mode="selector" :range="techTypeList" :value="techType"
						@change="bindTechTypePickerChange($event,techTypeList)" range-key="name">
						<view style="color: #191919;font-size: 28upx;line-height: 96upx;">
							{{techTypeList[techType].name}}
						</view>
					</picker>
					<image style="width: 24upx;height: 24upx;margin-left: 8upx;"
						src="../../static/images/right-avatar-icon.png" mode=""></image>
				</view>
			
			</view>
		
		
		
			
		</view>
		<view style="position: fixed;bottom: 0upx;margin-bottom: 68upx;padding: 0 30upx;" @click="applyTechAuth">
			<view style="width: 690upx;height: 80upx;background: #FF4E4C;border-radius: 40upx;
			text-align: center;line-height: 80upx;">提交申请</view>
		</view>
	</view>
</template>

<script>
	import{update_userInfo,detail,tech_auth} from '../../api/mine/user-info.js'
	import{set} from '../../utils/local.js'
	import {
		techType_pull
	} from '../../api/home/demand.js'
	export default {
		data() {
			return {
				techTypeList: [],
				techType: 0,
				techTypeId:1,
				email:"",
				mobile:"",
				qqAccount:"",
				wechatAccount:"",
				realName:"",
				alipayAccount:""
			}
		},
		onShow() {
			this.userInfoDetail()
			this.getTechTypeList();
		},
		
		methods: {
			applyTechAuth(){
				if(this.techTypeId ===null || this.techTypeId===''){
					uni.showToast({
						icon:'none',
						title:'请选择擅长技术'
					})
					return
				}
				
				if(this.email ===''){
					uni.showToast({
						icon:'none',
						title:'请输入邮箱'
					})
					return
				}
				
				if(this.alipayAccount ===''){
					uni.showToast({
						icon:'none',
						title:'请输入支付宝账号'
					})
					return
				}
				
				if(this.realName ===''){
					uni.showToast({
						icon:'none',
						title:'请输入真实名称'
					})
					return
				}
				if(this.qqAccount ===''){
					uni.showToast({
						icon:'none',
						title:'请输入qq号'
					})
					return
				}
				if(this.wechatAccount ===''){
					uni.showToast({
						icon:'none',
						title:'请输入微信号'
					})
					return
				}
				let params={}
				params.techTypeId=this.techTypeId;
				params.qqAccount=this.qqAccount;
				params.wechatAccount=this.wechatAccount;
				params.email=this.email;
				params.realName=this.realName;
				params.alipayAccount=this.alipayAccount;
				tech_auth(params).then(res=>{
					if(res.status===200){
						uni.showToast({
							icon:'none',
							title:'认证成功,请等待平台客服审核'
						})
						set('localTechAuth',true)
						setTimeout(function() {
							uni.navigateTo({
								url:'../tech-auth-success/tech-auth-success'
							})
						},1000)
						
					}
				})
			},
			
			getTechTypeList() {
				techType_pull().then(res => {
					if (res.status === 200) {
						this.techTypeList = res.data
					} else if (res.status === 401) {
						uni.navigateTo({
							url: '../login/login'
						})
					}
			
				})
			},
			userInfoDetail(){
				detail().then(res=>{
					if(res.status===200){
						this.email=res.data.email
						this.qqAccount=res.data.qqAccount
						this.wechatAccount=res.data.wechatAccount
						this.realName=res.data.realName
						if(res.data.techTypeId !==null){
							this.techType=Number(res.data.techTypeId)-1
						}
						
						this.alipayAccount=res.data.alipayAccount
					}
				})
			},
			bindTechTypePickerChange: function(e, techTypeList) {
				this.techType = e.target.value
				this.techTypeId = techTypeList[this.techType].id
				console.log(this.techTypeId)
				
			},
			
			updateUserInfo(){
				if(this.email===''){
					uni.showToast({
						icon:'none',
						title:'请填写邮箱'
					})
				}
				if(this.mobile===''){
					uni.showToast({
						icon:'none',
						title:'请填写手机号'
					})
				}
				if(this.qqAccount===''){
					uni.showToast({
						icon:'none',
						title:'请填写qq号码'
					})
				}
				if(this.wechatAccount===''){
					uni.showToast({
						icon:'none',
						title:'请填写微信号'
					})
				}
				let params={}
				params.email=this.email
				params.wechatAccount=this.wechatAccount
				params.qqAccount=this.qqAccount
				params.mobile=this.mobile
				update_userInfo(params).then(res=>{
					if(res.status===200){
						uni.showToast({
							title:"保存成功"
						})
					}
					setTimeout(function() {
						uni.switchTab({
							url:'../mine/mine'
						})
					},1000)
					
				})
			}
		}
	}
</script>

<style>
	.page {
		color: #F8F8F8;
	}

	.publish-demand-wrapper {
		display: flex;
		flex-direction: column;
		margin-top: 24upx;
		background: #FFFFFF;
	}
</style>
